<template>
  <div class="home">
   <!-- <HomeHeader></HomeHeader>
    <HomeHeader />
    <home-header></home-header>-->
    <home-header />
    <home-swiper :swiperList="swiperList" />
    <home-icons :iconsList="iconsList" />
    <home-location />
    <home-hot :hotList="hotList" />
    <home-like :likeList="likeList" />
    <home-footer />
  </div>
</template>
<script type="text/ecmascript-6">
  import HomeHeader from './pages/Header'
  import HomeSwiper from './pages/Swiper'
  import HomeIcons from './pages/Icons'
  import HomeLocation from './pages/Location'
  import HomeHot from './pages/Hot'
  import HomeLike from './pages/Like'
  import HomeFooter from './pages/Footer'
  export default {
    data(){
      return{
        iconsList:[],
        hotList:[],
        likeList:[],
        swiperList:[]
      }
    },
    mounted(){
      /*//1.在Vue环境中借助于node+express搭后台接口
      this.$http({
        url:'http://192.168.0.102:82/api/travel'
      }).then(res=>{
        console.log(res.data.data[0]);
        let data = res.data.data[0];

        this.iconsList = data.iconsList;
        this.hotList = data.hotList;
        this.likeList = data.likeList;
        this.swiperList = data.swiperList;

      }).catch(err=>{//异常处理
        console.log(err)
      })*/
      //2.在node.js+express环境中搭后台接口
      this.$http({
        url:'http://47.105.51.229/travel'
      }).then(res=>{
        //console.log(res.data.data.data);
        let data = res.data.data.data[0];

        this.iconsList = data.iconsList;
        this.hotList = data.hotList;
        this.likeList = data.likeList;
        this.swiperList = data.swiperList;

      }).catch(err=>{//异常处理
        console.log(err)
      })
      /*// 3.使用PHP搭后台接口
      this.$http({
        url:'http://47.105.51.229/travel.php'
      }).then(res=>{
        console.log(res.data.data);
        let data = res.data.data[0];

        this.iconsList = data.iconsList;
        this.hotList = data.hotList;
        this.likeList = data.likeList;
        this.swiperList = data.swiperList;

      }).catch(err=>{//异常处理
        console.log(err)
      })*/
    },
    components:{
      HomeHeader,
      HomeSwiper,
      HomeIcons,
      HomeLocation,
      HomeHot,
      HomeLike,
      HomeFooter
    }
  }
</script>
<style lang="stylus" scoped>
  .home
    background: #f5f5f5
    color:#212121
</style>
